<style lang="less">
  @import '../../styles/common.less';
</style>

<template>
  <div>
    <Form inline>
      <FormItem>
        <Input id="subject" v-model="subject" search enter-button="Search" placeholder="请输入栏目"></Input>
        <Button type="primary" size="large" @click="searc">搜索</Button>
        <Button type="primary" size="large" @click="add">添加内容</Button>
      </FormItem>
    </Form>
    <Table border :columns="columns" :data="data"></Table>
    <Page ref="page" :total="total" :page-size-opts="[10,20,50]" @on-change="query" :current="current" show-total size="small"></Page>
  </div>
</template>

<script>
  import moment from 'moment'
    export default {
        name: "context",
        data(){
          return{
            columns: [
              {
                title: '编号',
                key: 'id'
              },
              {
                title: '标题',
                key: 'title'
              },
              {
                title: '所属栏目',
                key: 'subject'
              },
              {
                title: '属性',
                key: 'attribute'
              },
              {
                title: '推荐',
                key: 'recommend'
              },
              {
                title: '作者',
                key: 'auth'
              },
              {
                title: '发布时间',
                key: 'pubTime',
                render:function (h,params) {
                  return h('div',
                    moment(params.row.putTime).format('YYYY-MM-DD HH:mm:ss'));
                }
              },
              {
                title: '操作',
                key: 'action',
                width: 180,
                align: 'center',
                render: (h, params) => {
                  return h('div', [
                    h('Button', {
                      props: {
                        type: 'primary',
                        size: 'small'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          this.show(params.index)
                        }
                      }
                    }, '查看'),
                    h('Button', {
                      props: {
                        type: 'primary',
                        size: 'small'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          this.edit(params.index)
                        }
                      }
                    }, '修改'),
                    h('Button', {
                      props: {
                        type: 'error',
                        size: 'small'
                      },
                      on: {
                        click: () => {
                          this.remove(params.index)
                        }
                      }
                    }, '删除')
                  ]);
                }
              }
            ],
            data: [

            ],
            current:1,
            total:0,
            pageSize:10,
            subject:''
          }
        },
        methods:{
          add(){
            this.$router.push({
              name: 'context_mod'
            });
          },
          show (index) {
            this.$Modal.info({
              title: '查看详情',
              content: `标题：${this.data[index].title}<br>
                        所属栏目：${this.data[index].subject}<br>
                        属性：${this.data[index].attribute}<br>
                        发布时间：${moment(this.data[index].pubTime).format('YYYY-MM-DD HH:mm:ss')}<br>`
            })
          },
          edit(index){
            this.$router.push({
              name: 'context_mod',
              query:{id:this.data[index].id}
            });
          },
          remove (index) {
            this.$http.get('/school/delNews?id='+this.data[index].id).then(res => {
              this.$Message.success('删除成功!');
              this.data.splice(index, 1);
            });
          },
          query(page){
            this.$http.get('/school/getNews?page='+page+'&offset='+this.pageSize+'&subject='+this.subject).then(res =>{
              console.log(res);
              this.data = res.data.data.data;
              this.total = res.data.data.cnt;
              this.$refs['page'].currentPage = 1;
            })
          },
          searc(){

            this.query(1);
          }

        },
      mounted () {
        this.query(1);
      }
    }
</script>

<style scoped>

</style>
